<template>
  <div class="app-main-content-box">
    <!-- 表格 -->
    <div class="table_box">
      <el-table
        :data="tableData"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        border
        style="width: 100%"
      >
        <el-table-column prop="merchName" label="商户名称" />
        <el-table-column prop="merchPhone" label="联系电话" />
        <el-table-column prop="address" label="商户总部地址" />
        <el-table-column prop="financingParty" label="出资方">
          <template slot="header" slot-scope="scope">
            <span>出资方</span>
            <!-- <el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
							<div slot="content">出资方指优惠折扣或活动优惠的钱由谁承担</div>
							<i class="el-icon-question" />
						</el-tooltip> -->
          </template>
          <template slot-scope="scope">
            <div v-if="scope.row.financingParty">
              <p>
                {{ scope.row.financingParty == 1 ? "本商户" : "合作商户"
                }}{{
                  scope.row.needAgree == 1 && scope.row.financingParty == 1
                    ? "（需要同意）"
                    : scope.row.needAgree == 0 && scope.row.financingParty == 1
                      ? "（不需要同意）"
                      : ""
                }}
              </p>
            </div>
            <p v-else>无</p>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="参与状态">
          <template slot="header" slot-scope="scope">
            <span>参与状态</span>
          </template>
          <template slot-scope="scope">
            <p>{{ scope.row.status }}</p>
            <p
              v-if="scope.row.needAgree == 0 && scope.row.financingParty == 1"
              style="color: red"
            >
              【系统自动参与】
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <pagination-direction
      v-if="paginationConfig.total !== 0"
      :config="paginationConfig"
      @sizeschange="sizesChange"
      @pagechange="pageChange"
    />
  </div>
</template>

<script>
import { getQueryEnrollmentData } from '@/api/coupon'
export default {
  props: {
    couponBase: {
      require: true,
      type: Object
    }
  },
  data() {
    return {
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      /* 表格 */
      tableData: []
    }
  },
  mounted() {
    this.getQueryEnrollmentDataFun()
  },
  methods: {
    getQueryEnrollmentDataFun() {
      const { id, belongMerchant } = this.couponBase
      const params = {
        couponId: id, // 优惠券id
        merchant: belongMerchant, // 商户id
        page: this.paginationConfig.page, // 页数
        pageSize: this.paginationConfig.pageSize // 每页显示数量
      }
      getQueryEnrollmentData(params).then((res) => {
        console.log('报名数据', res)
        if (res.code == 0) {
          this.paginationConfig.total = res.data.total
          const data = res.data.list
          const tableData = []
          data.forEach((el) => {
            const dataItem = {
              merchName: el.cooperateName,
              merchPhone: el.cooperatePhone,
              address: el.cooperateCoreAddress,
              financingParty: el.financingParty,
              needAgree: el.needAgree,
              status:
                el.participationStatus == 1
                  ? '未处理'
                  : el.participationStatus == 2
                    ? '已参与'
                    : '已拒绝'
            }
            tableData.push(dataItem)
          })
          this.tableData = tableData
        }
      })
    },

    // 分页sizes改变
    sizesChange(e) {
      this.getQueryEnrollmentDataFun()
    },

    // 分页page改变
    pageChange(e) {
      this.getQueryEnrollmentDataFun()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped></style>
